<template>
	<m-layout class="layout-box mine" gap="0 24" :goBack="false" barBg="unset" :scrollTop="scrollTop" title="" color="#ffffff" scrollColor="#FFD100" :topShow="30">
		<view v-if="scrollTop > 30" slot="back" class="flex" :style="{ color: color }">
			<text class="fs34">{{ userinfo.nicKname }}</text>
		</view>
		<view v-if="scrollTop > 30" slot="right" @click="Jump('/pages/mine/setAccount/setAccount')">
			<m-icon size="48" spa="0 0 0 10" :color="color" type="icon-icon-set" @click="Jump('/pages/mine/setAccount/userinfo')" />
		</view>
		<!-- 用户信息 -->
		<view class="mine_box flex-between">
			<view class="mine_info flex-between">
				<view class="tx_img">
					<m-avatar radius="100" :type="userinfo.headPicUrl" size="110"></m-avatar>
				</view>
				<view class="tx_info">
					<view class="flex">
						<view style="font-size: 36rpx; color: #333">{{ userinfo.nicKname }}</view>
					</view>
					<view class="flex mt-12">
						<view class="dls flex-center plr-16 ptb-4">
							<m-icon type="icon-gongyingshangdailishang" class="mr-8" color="#FFF" size="28"></m-icon>
							<text class="fs21">{{ dlsEnum[userinfo.dls] }}</text>
						</view>
					</view>
					<view v-if="userinfo.invid" class="flex" style="margin-top: 18rpx">
						<view>邀請碼：{{ userinfo.invcode }}</view>
						<m-icon @click="doCopy(userinfo.invcode)" spa="0 0 0 10" color="#464646" type="icon-fuzhi"></m-icon>
					</view>
				</view>
			</view>
			<view class="set_img" @click="Jump('/pages/mine/setAccount/setAccount')">
				<m-icon size="48" spa="0 0 0 10" color="#333" type="icon-icon-set" />
			</view>
		</view>
		<m-block class="mytotal mt-24 flex-column text-white">
			<view class="flex-between ptb-28 plr-24">
				<view class="flex">
					<m-icon type="wallet" size="32" />
					<text class="fs26 ml-8">獎勵中心</text>
				</view>
				<view class="flex fs24" @click="Jump('/pages/home/reward-center/reward-center')">
					<text class="text-white-70">明细</text>
					<m-icon size="24" type="icon-qianjin" color="#f0f0f0" />
				</view>
			</view>
			<view class="flex jc-space-around pt-16">
				<view class="flex-column ai-center jc-center">
					<text class="fs22 text-white-70 mb-8">推薦獎勵</text>
					<view class="flex fs30 ai-baseline">
						<text>{{ myTotal[52] ? myTotal[52] : 0 }}</text>
						<text class="fs21 ml-4">{{coinConfig[1]['coinname']}}</text>
					</view>
				</view>
				<view class="flex-column ai-center jc-center">
					<text class="fs22 text-white-70 mb-8">提成獎勵</text>
					<view class="flex fs30 ai-baseline">
						<text>{{ myTotal[51] ? myTotal[51] : 0 }}</text>
						<text class="fs21 ml-4">{{coinConfig[1]['coinname']}}</text>
					</view>
				</view>
				<view class="flex-column ai-center jc-center">
					<text class="fs22 text-white-70 mb-8">農場收益</text>
					<view class="flex fs30 ai-baseline">
						<text>{{ myTotal[41] ? myTotal[41] : 0 }}</text>
						<text class="fs21 ml-4">{{coinConfig[4]['coinname']}}</text>
					</view>
				</view>
				<view class="flex-column ai-center jc-center">
					<text class="fs22 text-white-70 mb-8">服務費</text>
					<view class="flex fs30 ai-baseline">
						<text>{{ myTotal[53] ? myTotal[53] : 0 }}</text>
						<text class="fs21 ml-4">{{coinConfig[4]['coinname']}}</text>
					</view>
				</view>
			</view>
		</m-block>
		<!-- 公告 -->
		<m-notice ref="notice" class="mtb-20" />
		<view class="flex">
			<m-block bgColor="#FFF" radius="20" class="flex-1 flex jc-space-between ai-center ptb-24 plr-32" @click="Jump('/pages/home/share/share')">
				<text>邀請好友</text>
				<m-icon type="yqhy" size="96"></m-icon>
			</m-block>
			<m-block bgColor="#FFF" radius="20" class="flex-1 ml-12 flex jc-space-between ai-center ptb-24 plr-32" @click="Jump('/pages/mine/myteam/myteam')">
				<text>我的社區</text>
				<m-icon type="wdsq" size="96"></m-icon>
			</m-block>
		</view>
		<!-- 我的订单 -->
		<!-- <order ref="morder" /> -->
		<!-- 更多服务 -->
		<server ref="mserver" />
		<!-- 普通分类商品 首页推荐 -->
		<!-- <m-block gap="20 0 30" spa="0 0" bgColor="unset">
			<hot-sale ref="hot" :tid="oneType" :isnew="Number(1)" title="新~品~推~荐"></hot-sale>
		</m-block> -->

		<!-- 实名认证提示 -->
		<m-dialog
			title="提示"
			:loading="btnLoading"
			:showCancel="true"
			:isShow="tishiShow"
			@handleCancel="
				tishiShow = false;
				btnLoading = false;
			"
			@handleConfirm="
				tishiShow = false;
				Jump('/pages/mine/information/information');
			"
		>
			<view class="ta-center ptb-48">需完成實名認證，立即前往認證</view>
		</m-dialog>
	</m-layout>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import server from './components/server.vue';
import order from './components/order.vue';
import { UserInfo } from '@/api/Users.js';
import { array } from 'js-md5';
import { creditTotal } from '@/api/Trade.js';
export default {
	components: { server, order },
	data() {
		return {
			topStyle: 'rgba(255, 102, 71, 0)',
			color: 'rgba(255, 255, 255, 0)',
			ftcolor: 'rgba(255, 255, 255, 0)',
			scrollTop: 0,
			// add 2023年4月24日09:43:21
			opacity: 0,
			oneType: '-1',
			tishiShow: false,
			btnLoading: false,
			myTotal: {} //  我的个人业绩
		};
	},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			userinfo: (state) => state.user.userinfo,
			userbalance: (state) => state.user.userbalance
		}),
		myBalance() {
			let c = 0;
			c = this.userbalance[1].balance - this.userbalance[1].lockbalance;
			return c;
		},
		myBalance2() {
			let c = 0;
			c = this.userbalance[2] ? this.userbalance[2].balance - this.userbalance[2].lockbalance : 0;
			return c;
		},
		dlsEnum() {
			const state = this.$store.state.general.enum;
			return state['Dls'];
		},
		hhrEnum() {
			const state = this.$store.state.general.enum;
			return state['Hhr'];
		}
	},
	methods: {
		rechargeFn() {
			this.Jump('/pages/wallet/recharge/recharge');
		},
		async getMyTotal() {
			const { success, msg, data } = await creditTotal({
				credittype: '53,52,51,41'
			});
			// const arr = [{id:1,num:123},{id:2,num:3232}];
			const obj = data.reduce((acc, cur) => {
			  acc[cur.tradeType] = cur.rewardAmount;
			  return acc;
			}, {});
			console.log('obj',obj)
			this.myTotal = obj;
		}
	},
	async onShow() {
		this.$nextTick(() => {
			// this.$refs.morder.OrderCount();
			this.$refs.mserver.getAppFn();
		});
	},
	onLoad() {
		UserInfo();
		this.getMyTotal();
	},
	onPageScroll({ scrollTop }) {
		this.scrollTop = scrollTop;
		let a = scrollTop / 2 / 100;
		if (scrollTop > 60) a = 1;
		if (scrollTop <= 60) a = 0;
		this.opacity = a;
		this.topStyle = `rgba(255, 102, 71, ${a})`;
		this.color = `rgba(255, 255, 255, ${a})`;
	},
	// onPullDownRefresh() {
	// 	this.reset();
	// },
	onReachBottom() {
		// this.$refs.hot.getData()
		console.log('触底了');
	}
};
</script>

<style lang="scss">
.mine {
	padding-bottom: 100rpx;
	background: url('@/static/images/pages/mine/mine-top-bg.png');
	background-repeat: no-repeat;
	background-size: 504rpx, 629rpx;
	background-position: right top;

	.mine_box {
		padding-top: 50rpx;

		.mine_info {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;

			.tx_img {
				width: 110rpx;
				height: 110rpx;
				margin-right: 27rpx;
				position: relative;

				.level {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.tx_info {
				.vip_v {
					background: linear-gradient(270deg, #717c8a 0%, #9fb2bd 100%);
					border-radius: 22rpx;
					padding: 5rpx 16rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.hhr {
	background: linear-gradient(140deg, #24221f, #43403c);
	border-radius: 40rpx;
	color: #f9dbb2;
}

.dls {
	background: linear-gradient(86deg, #1d3021, #4d431a);
	border-radius: 40rpx;
	color: #fff;
}

.wallet_box {
	align-items: center;

	.price_box {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333;

		view:nth-of-type(2) {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			margin-top: 24rpx;
		}
	}

	.wallet_btn {
		border: none;
		background: var(--theme);
		padding: 10rpx 60rpx;
		font-size: 26rpx;
		color: #333;
	}
}

.balanceBox {
	.wallet_box2 {
		height: 150rpx !important;
	}

	.wallet_box {
		box-sizing: border-box;
		width: 100%;
		height: 190rpx;
		background: linear-gradient(-82deg, #fff, #fff);
		border-radius: 20rpx 20rpx 0rpx 0px;

		.price_box {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;

			view:nth-of-type(2) {
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.wallet_btn {
			background: linear-gradient(102deg, #a867fd 0%, #786bff 100%);
			border-radius: 30rpx;
			padding: 15rpx 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
.mytotal {
	background: url('../../static/images/pages/reward-center/mytotalBg.png') no-repeat !important;
	height: 240rpx;
	background-size: 100%, 240rpx;
}
</style>
